<template>
  <div class="main-container" style="height: 100%">
    <div class="item-content" style="height: 100%">
      <div class="form-content" style="margin-bottom: 20px; height: 100%">
        <div style="height: 100%">
          <myTable
            :loading="isLoading"
            tabHeight="600"
            ref="table"
            :data="data"
            :linkShow2="true"
            :label="label"
            :addShow="true"
            :searchShow="true"
            :paginationConfig="paginationConfig"
            :pagingShow="true"
            :multiSelectShow="true"
            @deleteRow="deleteRow"
            @selectionChange="selectionChange"
            @changePage="changePage"
            @changeSize="changeSize"
            @edit="edit"
          >
            <template #first>
              <el-button type="success" @click="visible = true">新增</el-button>
              <el-button type="danger" size="default" @click="deleteList()"
                >批量删除 <i class="el-icon-delete"></i>
              </el-button>
            </template>
            <template #second>
              <div
                style="
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  gap: 10px;
                "
              >
                <el-input
                  placeholder="请输入"
                  v-model="searchValue"
                  size="small"
                  class="input-with-select"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="search"
                  ></el-button>
                </el-input>
                <el-button
                  size="small"
                  icon="el-icon-refresh"
                  @click="changeTable()"
                ></el-button>
              </div>
            </template>
            <template #unitPositionName="obj">
              <el-link
                type="primary"
                :underline="false"
                :href="'#/pdf?address=' + obj.params.riskNotifyImgUrl"
                target="_blank"
              >
                {{ obj.params.unitPositionName }}
              </el-link>
            </template>
            <template #riskPoint="obj">
              <el-link
                type="primary"
                :underline="false"
                :href="'#/pdf?address=' + obj.params.riskPointImgUrl"
                target="_blank"
              >
                {{ obj.params.riskPoint }}
              </el-link>
            </template>
          </myTable>
          <myDialog
            :Form="Form"
            :label="label2"
            :visible="visible"
            @disVisible="disVisible"
            @submitSecurity="submitSecurity"
            :span="12"
          >
            <template #riskPointImgUrl>
              <MyFiles
                :limit="1"
                name="风险点位文件上传"
                :fileList="fileList1"
                @changeFile="changeFile1"
              ></MyFiles>
            </template>
            <template #riskNotifyImgUrl>
              <MyFiles
                :limit="1"
                name="岗位风险告知卡"
                :fileList="fileList2"
                @changeFile="changeFile2"
              ></MyFiles>
            </template>
          </myDialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineComponent, onMounted } from "vue";
import myTable from "@/components/my-table.vue";
import MyFiles from "@/components/my-files.vue";
//
const fileList1 = ref([]);
const fileList2 = ref([]);
//风险点位告知卡
const changeFile1 = (res) => {
  fileList1.value = res;
  console.log("fileList1:");
  console.dir(res);
};
//岗位风险告知卡
const changeFile2 = (res) => {
  fileList2.value = res;
  console.log("fileList2:");
  console.dir(res);
};
const disVisible = () => {
  visible.value = false;
  Form.value = {};
  fileList1.value = [];
  fileList2.value = [];
};
//改名字
const NewComponentName = defineComponent({
  name: "NewComponentName",
});
console.log(NewComponentName);

import { Notification } from "element-ui";
import {
  saveSafetyRisk,
  querySafetyRisks,
  querySafetyRisk,
  updateSafetyRisk,
  deleteSafetyRisk,
} from "@/api/securityriskmanagement/index";
//是编辑还是新增
const flagEdit = ref(false);
// 编辑
const edit = (row) => {
  Form.value = { ...row };
  visible.value = true;
  flagEdit.value = true;
  let riskPointImgUrl = Form.value.riskPointImgUrl;
  let riskNotifyImgUrl = Form.value.riskNotifyImgUrl;
  if (riskPointImgUrl != null && riskPointImgUrl != "") {
    fileList1.value = [
      {
        name: " 风险点位文件",
        url: riskPointImgUrl,
      },
    ];
  }
  if (riskNotifyImgUrl != null && riskNotifyImgUrl != "")
    fileList2.value = [
      {
        name: "岗位风险告知卡",
        url: riskNotifyImgUrl,
      },
    ];
};

//选中的id
const table = ref(null);
// dialog From
const Form = ref({
  id: null,
  unitPositionName: null,
  riskPoint: null,
  hazardousFactor: null,
  accidentType: null,
  likelihood: null,
  exposureFrequency: null,
  consequence: null,
  riskLevel: null,
  controlMeasures: null,
  controlResponsiblePerson: null,
  riskNotifyImgUrl: null,
  riskPointImgUrl: null,
});
//设置返回的数据
const field = ref([
  "id",
  "unitPositionName",
  "riskPoint",
  "hazardousFactor",
  "accidentType",
  "likelihood",
  "exposureFrequency",
  "consequence",
  "riskLevel",
  "controlMeasures",
  "controlResponsiblePerson",
  "riskNotifyImgUrl",
  "riskPointImgUrl",
]);
// dialog 是否 show
const visible = ref(false);
// 点击确定时：
const submitSecurity = async (form) => {
  for (var key in form.value) {
    if (!field.value.includes(key)) {
      //删除无需返回的字段
      delete form.value[key];
    }
    if (key == "id" || key == "riskNotifyImgUrl" || key == "riskPointImgUrl")
      continue;
    if (form.value[key] === "" || form.value[key] === null) {
      Notification({
        title: "失败",
        message: "请检查参数",
        type: "error",
      });
      console.log("form.value");
      console.log(form.value);
      return;
    }
  }
  //更新
  if (flagEdit.value == true) {
    console.log("更新：");
    console.log(form.value);
    let res = await updateSafetyRisk(form.value);
    if (res.code == 0) {
      Notification({
        title: "成功",
        message: "修改成功",
        type: "success",
      });
      changeTable();
    } else {
      Notification({
        title: "失败",
        message: "修改失败",
        type: "error",
      });
    }
    flagEdit.value = false;
  } else {
    //新增
    console.log("新的：");
    console.log(form.value);
    let res = await saveSafetyRisk(form.value);
    if (res.code == 0) {
      Notification({
        title: "成功",
        message: "新增成功",
        type: "success",
      });
      paginationConfig.value.page = 1;
      changeTable();
    } else {
      Notification({
        title: "失败",
        message: "新增失败",
        type: "error",
      });
    }
  }
  visible.value = false;
  Form.value = {};
  fileList1.value = [];
  fileList2.value = [];
};
const data = ref([]);
//table label
const label = ref([
  {
    label: "单元或岗位名称",
    prop: "unitPositionName",
    width: "150",
    fixed: true,
    columnType: "slot",
    slotName: "unitPositionName",
  },
  {
    label: "风险点位",
    prop: "riskPoint",
    columnType: "slot",
    slotName: "riskPoint",
  },

  {
    label: "危险有害因素",
    prop: "hazardousFactor",
    width: "150",
  },
  {
    label: "事故类型",
    prop: "accidentType",
  },
  {
    label: "L(事故可能性)",
    prop: "likelihood",
    width: "150",
  },
  {
    label: "E(暴露于危险环境频率)",
    prop: "exposureFrequency",
    width: "200",
  },
  {
    label: "C(事故后果)",
    prop: "consequence",
    width: "150",
  },
  {
    label: "D=LEC(风险值)",
    prop: "riskValue",
    width: "150",
  },
  {
    label: "风险等级",
    prop: "riskLevel",
  },
  {
    label: "管控措施",
    prop: "controlMeasures",
  },
  {
    label: "管控责任人",
    prop: "controlResponsiblePerson",
    width: "150",
  },
]);
const label2 = ref([
  {
    label: "单元或岗位名称",
    prop: "unitPositionName",
  },
  {
    label: "风险点位",
    prop: "riskPoint",
  },

  {
    label: "风险告知卡文件上传",
    prop: "riskNotifyImgUrl",
    columnType: "slot",
    slotName: "riskNotifyImgUrl",
  },
  {
    label: "风险点位文件上传",
    prop: "riskPointImgUrl",
    columnType: "slot",
    slotName: "riskPointImgUrl",
  },
  {
    label: "危险有害因素",
    prop: "hazardousFactor",
  },
  {
    label: "事故类型",
    prop: "accidentType",
  },

  {
    label: "L(事故可能性)",
    prop: "likelihood",
  },
  {
    label: "E(暴露于危险环境频率)",
    prop: "exposureFrequency",
  },
  {
    label: "C(事故后果)",
    prop: "consequence",
  },
  {
    label: "风险等级",
    prop: "riskLevel",
  },
  {
    label: "管控措施",
    prop: "controlMeasures",
  },
  {
    label: "管控责任人",
    prop: "controlResponsiblePerson",
  },
]);
const searchValue = ref();
//按照id搜索
const search = async () => {
  let res = await querySafetyRisk(searchValue.value);
  data.value = [];
  if (res.code == 0) {
    data.value = res.data;
    Notification({
      title: "成功",
      message: "查询成功",
      type: "success",
    });
  } else {
    Notification({
      title: "失败",
      message: res.message,
      type: "error",
    });
  }
};
//分页对象
const paginationConfig = ref({
  page: 1,
  size: 10,
  total: 0,
});
//页数改变触发
const changePage = (val) => {
  paginationConfig.value.page = val;
  changeTable();
};
//显示数量改变触发
const changeSize = (val) => {
  paginationConfig.value.size = val;
  changeTable();
};

const isLoading = ref(true);
//组件通讯获取选中的id
const deleteRow = (id) => {
  selectList.value = [id];
  deleteList();
};
//刷新table
const changeTable = async () => {
  searchValue.value = "";
  isLoading.value = true;
  let res = await querySafetyRisks(
    paginationConfig.value.page,
    paginationConfig.value.size
  );

  if (res.data?.total != null) {
    paginationConfig.value.total = Number(res.data.total);
  }
  isLoading.value = false;
  data.value = res.data?.list;
  console.log("这是结果");
  console.log(data.value);
};
//进入页面刷新
onMounted(() => {
  changeTable();
});
//批量选择的数据
const selectList = ref([]);
const selectionChange = (value) => {
  selectList.value = value;
};
//删除所选中的
const deleteList = async () => {
  if (selectList.value.length == 0) {
    Notification({
      title: "警告",
      message: "请选择要删除的项",
      type: "warning",
    });
    return;
  }
  let result = await deleteSafetyRisk(selectList.value);
  if (result.code == 0) {
    Notification({
      title: "成功",
      message: "删除成功",
      type: "success",
    });
    paginationConfig.value.page = 1;
    changeTable();
  } else {
    Notification({
      title: "失败",
      message: "删除失败",
      type: "error",
    });
  }
};
</script>
<style lang="scss" scoped>
:deep(.el-input__inner) {
  height: auto !important;
}
// :deep(.cell) {
//   display: flex;
//   justify-content: space-around;
// }
::v-deep .el-upload-list__item {
  transition: none !important;
}
::v-deep .el-upload-list__item-thumbnail {
  /* 图片在方框内显示长边 */
  object-fit: scale-down !important;
}

:deep(.el-input__inner) {
  height: auto !important;
}
:deep(.el-icon-arrow-right:before) {
  font-size: 12px !important;
}
:deep(.el-table th) {
  background: #fafafa;
}
:deep(.el-collapse-item__header) {
  font-weight: bold;
  color: #333;
  font-size: 15px;
  padding: 0 10px;
}
:deep(.el-icon-arrow-right:before) {
  font-weight: bold;
  color: #333;
  font-size: 25px;
}
:deep(.main) {
  height: 100%;
}
:deep(.el-menu--horizontal > .el-submenu .el-submenu__title) {
  height: 54px;
  line-height: 54px;
}
.link {
  display: flex;
  font-size: 2em;
  font-weight: 700;
  width: 100%;
  height: 2em;
  :deep(.el-link) {
    font-size: 0.7em;
  }
}
:deep(.el-link) {
  margin-right: 0.5em;
  font-size: 1em;
}
// :deep(.cell) {
//   display: flex;
//   justify-content: space-around;
// }
/*去除upload组件过渡效果*/

.main-header-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  flex-grow: 0;
  margin-bottom: 12px;

  .title {
    position: relative;
    font-weight: bold;
    color: #333;
    font-size: 15px;
    padding-left: 16px;

    &::after {
      content: "";
      width: 3px;
      height: 16px;
      background-color: #82a848;
      left: 0;
      top: calc(50% - 8px);
      position: absolute;
    }

    &::before {
      content: "";
      width: 3px;
      height: 16px;
      background-color: #82a848;
      left: 5px;
      top: calc(50% - 8px);
      position: absolute;
    }
  }

  .main-header-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
}
body {
  min-height: 100vh;

  transition: all 0.3s ease;
}
.container {
  padding: 15px;
  overflow: auto;
  box-sizing: border-box;

  .main-content {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    min-width: 700px;

    .header-container {
      padding: 15px 15px;
      border-bottom: solid 1px #e6e6e6;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .title {
        position: relative;
        font-weight: bold;
        color: #333;
        font-size: 15px;
        padding-left: 16px;

        &::before {
          content: "";
          width: 3px;
          height: 16px;
          background-color: #82a848;
          left: 5px;
          top: calc(50% - 8px);
          position: absolute;
        }

        &::after {
          content: "";
          width: 3px;
          height: 16px;
          background-color: #82a848;
          left: 5px;
          top: calc(50% - 8px);
          position: absolute;
        }
      }
    }
  }
}

.main {
  padding: 12px 15px;

  .item-content {
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;

    .item-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;

      .subheading {
        position: relative;
        color: #555;
        font-size: 14px;
        padding-left: 14px;

        &::after {
          content: "";
          width: 2px;
          height: 14px;
          background-color: #82a848;
          left: 0;
          top: calc(50% - 7px);
          position: absolute;
        }

        &::before {
          content: "";
          width: 2px;
          height: 14px;
          background-color: #82a848;
          left: 4px;
          top: calc(50% - 7px);
          position: absolute;
        }
      }
    }

    .content-container {
      margin-top: -1px;
    }
  }
}

.w-100 {
  width: 100%;
}

.item-form-content {
  display: flex;
  flex-direction: row;
  align-items: center;

  i {
    margin: 0 10px;
  }
}

.productList-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  height: 40px;
}

.form-content {
  padding: 0 10px;
}
.dialog-action-bar {
  text-align: center;
  margin-top: 30px;
}
</style>